
  var t=0;
  var role=[];
  var num
  var td;
  var positionX = -1;
  var positionY = -1;
  $(function(){
	  initTable();
  	})
	 
	 function initTable(){
	  roles=[{'color':'red','role':'img/mouse.png','power':'1'},{'color':'red','role':'img/cat.png','power':'2'},{'color':'red','role':'img/dog.png','power':'3'},
	 				{'color':'red','role':'img/wolf.png','power':'4'},{'color':'red','role':'img/pard.png','power':'5'},{'color':'red','role':'img/tiger.png','power':'6'},
	 				{'color':'red','role':'img/loin.png','power':'7'},{'color':'red','role':'img/elephant.png','power':'8'},
	 				{'color':'blue','role':'img/mouse.png','power':'1'},{'color':'blue','role':'img/cat.png','power':'2'},{'color':'blue','role':'img/dog.png','power':'3'},
	 				{'color':'blue','role':'img/wolf.png','power':'4'},{'color':'blue','role':'img/pard.png','power':'5'},{'color':'blue','role':'img/tiger.png','power':'6'},
	 				{'color':'blue','role':'img/loin.png','power':'7'},{'color':'blue','role':'img/elephant.png','power':'8'}];
	    $("#container").html('');
		var table=$("<table></table>");
		   num=4;
		var width=document.body.clientWidth*0.4/num;
		for(var i=0;i<num;i++){
		   var tr=$("<tr style='width:"+width*num+"px;height:"+width+"px;'></tr>");
		   for(var j=0;j<num;j++){
		     var td=$("<td position='"+i+","+j+"' onclick='backopen(this)' style='width:"+width+"px;height:"+width+"px;'> </td>");
		     var a = $("<img  alt='' src='img/back.png' style='width:"+width+"px;height:"+width+"px;' power='0'>");
			 td.append(a);
			 /* if(i==parseInt($("#txt_x").val())-1&&j==parseInt($("#txt_y").val())-1){
				 var a = $("<img alt='' src='img/mouse.png' style='width:"+width+"px;height:"+width+"px;'>");
				 td.append(a);
			    td.css("background-color","red");
			 } */
			 tr.append(td);
		   }
		   table.append(tr);
		}
		 $("#container").append(table);
	 }
  
  function backopen(td){
	  emptyColor();
	  var power = $(td).find("img").attr('power');
	  if(power != 0)
		  return ;
	  var roleObject = randomRole();
	  var color = roleObject.color;
	  var role = roleObject.role;
	  power = roleObject.power
	  $(td).css("background-color",color);
	  $(td).attr("onclick","choose(this)");
	  $(td).find("img").attr("src",role);
	  $(td).find("img").attr('power',power);
  }
  
  function randomRole(){
	  var random = Math.floor(Math.random()*roles.length)
	  var roleObject = roles[random];
	  roles.remove(random);
	  return roleObject;
  }
  
  function choose(td){
	  var num = $(".choose").length;
	  if(num == 0){
		  var power = $(td).find("img").attr('power');
		  if(power < 1)
			  return ;
		  var color = $(td).css("background-color");
		  $(td).attr("onclick","unchoose(this)");
		  if(color == 'rgb(255, 0, 0)')
	  	  	  $(td).attr("class","choose blue");
		  else
			  $(td).attr("class","choose red");
		  var position = $(td).attr("position");
		  var split = position.split(",");
		  positionX = split[0];
		  positionY = split[1];
		  this.td = td;
	  }else{
		  var power = $(td).find("img").attr('power');
		  
		  if($(td).css("background-color") == $(this.td).css("background-color")){
			  unchoose(this.td);
			  choose(td);
			  return ;
		  }
		  
		  if(power == 0)
			  return ;
		  var position = $(td).attr("position");
		  var split = position.split(",");
		  if(positionX != split[0] && positionY != split[1])
			  return ;
		  if(Math.abs(positionX - split[0]) != 1 && Math.abs(positionY - split[1]) != 1)
			  return ;
		  if($(this.td).find("img").attr('power') == 1 && power == 8){
			  $(td).css("background-color",$(this.td).css("background-color"));
			  $(td).find("img").attr("src",$(this.td).find("img").attr("src"));
			  $(td).find("img").attr('power',$(this.td).find("img").attr('power'));
			  $(this.td).css("background-color","");
			  $(this.td).attr("onclick","choose(this)");
			  $(this.td).find("img").attr("src","");
			  $(this.td).find("img").attr('power',"-1")
			  td = null;
			  positionX = -1;
			  positionY = -1;
			  emptyColor();
			  return ;
		  }
		  if($(this.td).find("img").attr('power') == 8 && power == 1)
			  return ;
		  if($(this.td).find("img").attr('power') < power)
			  return ;
		  if($(this.td).find("img").attr('power') == power){
			  $(this.td).css("background-color","");
			  $(this.td).attr("onclick","choose(this)");
			  $(this.td).find("img").attr("src","");
			  $(this.td).find("img").attr('power',"-1")
			  $(td).css("background-color","");
			  $(td).attr("onclick","choose(this)");
			  $(td).find("img").attr("src","");
			  $(td).find("img").attr('power',"-1")
		  }else{
			  $(td).css("background-color",$(this.td).css("background-color"));
			  $(td).find("img").attr("src",$(this.td).find("img").attr("src"));
			  $(td).find("img").attr('power',$(this.td).find("img").attr('power'));
			  $(this.td).css("background-color","");
			  $(this.td).attr("onclick","choose(this)");
			  $(this.td).find("img").attr("src","");
			  $(this.td).find("img").attr('power',"-1")
		  }
		  td = null;
		  positionX = -1;
		  positionY = -1;
		  emptyColor();
	  }
  }
  
  function unchoose(td){
	  var power = $(td).find("img").attr('power');
	  $(td).attr("class","");
	  $(td).attr("onclick","choose(this)");
	  positionX = -1;
	  positionY = -1;
  }
  
  function emptyColor(){
	  $(".choose").each(function(){
		  var td = $(this);
		  unchoose(td);
	  });
  }

	 function calcTable(){
	    var dr=parseInt($("#txt_x").val())-1;
		var dc=parseInt($("#txt_y").val())-1;
	    chessBoard(0,0,dr,dc,num);
	 }
   
	 //tr tc子棋盘左上角坐标 dr dc特殊格子坐标 size子棋盘格子数
	 function chessBoard(tr,tc,dr,dc,size){
	   var s,t1;
	   if(size==1)
	      return;
		t1=t++;
		s=size/2;
		var color=roles[t1%4];
		//-------------左上角子棋盘-----------------
        if(dr<tr+s&&dc<tc+s){
		    //特殊格子在右上角,递归处理子棋盘
			chessBoard(tr,tc,dr,dc,s);
		}else{ 
		    //处理右下角围绕分割点的棋盘
			//标记特殊棋盘
			$("table tr").eq(tr+s-1).find("td").eq(tc+s-1).css("background-color",color);
			chessBoard(tr,tc,tr+s-1,tc+s-1,s); 
		}
	    
		//--------------右上角棋盘-------------------
		if(dr>=tr+s&&dc<tc+s){
		   chessBoard(tr+s,tc,dr,dc,s);
		}else{
		    //左下角格子
		    $("table tr").eq(tr+s).find("td").eq(tc+s-1).css("background-color",color);
			chessBoard(tr+s,tc,tr+s,tc+s-1,s); 
		}
		//--------------左下角棋盘-------------------
		if(dr<tr+s&&dc>=tc+s){
		   chessBoard(tr,tc+s,dr,dc,s);
		}else{		    
		    $("table tr").eq(tr+s-1).find("td").eq(tc+s).css("background-color",color);
			chessBoard(tr,tc+s,tr+s-1,tc+s,s); 
		}
		//--------------右下角棋盘-------------------
		if(dr>=tr+s&&dc>=tc+s){
		   chessBoard(tr+s,tc+s,dr,dc,s);
		}else{		   
			//setTimeout("setColor("+tr+s+","+tc+s+",'"+color+"')",1000);
		    $("table tr").eq(tr+s).find("td").eq(tc+s).css("background-color",color);
			chessBoard(tr+s,tc+s,tr+s,tc+s,s); 
		}
        
	 }

	 Array.prototype.remove = function(val) {
		 if (val > -1) {
		 	this.splice(val, 1);
		 	}
		 };
